<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 媒体查询 */
    /* 在屏幕设备中 判断屏幕尺寸大于等于800px的时候 */
    @media screen and (min-width: 800px) {

        /* 背景颜色 */
        body {
            background-color: pink;
        }

    }
</style>

<body>
    <!-- 媒体查询 -->
    <!-- 语法规范：
        1.用@media开头 注意@符号
        2.mediatype媒体类型
            值                  解释说明
            all                 用于所有设备
            print               用于打印机和打印预览
            screen              用于电脑屏幕 平板电脑 智能手机等
        3.关键字 and not or only
            关键字将媒体类型或多个媒体类型连接到一起作为媒体查询的条件
            a.and可以将多个媒体特性连接到一起 相当于"且"的意思
            b.not排除某个媒体类型 相当于"非"的意思
            c.or 可以测试多个媒体查询的条件 只要有一个条件成立 就执行 相当于"或”的意思
            d.only 指定某个特定的媒体类型 可以省略
        4.media feature 媒体特性 必须有小括号包含 
            a.width 定义输出设备中页面可见区域的宽度
            b.min-width 定义输出设备中页面最小可见区域的宽度
            c.max-width 定义输出设备中页面最大可见区域的宽度-->
</body>

</html>